﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>普加甘特图 - WEB甘特图首选解决方案</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="css/core.css" rel="stylesheet" type="text/css" />
    <script src="scripts/core.js" type="text/javascript"></script>
    <script src="scripts/boot.js" type="text/javascript"></script>
    <script src="../lib/json2.js" type="text/javascript"></script>
</head>
<body>
    <center>
        <div class="container">
            <div class="body">
                <div class="main demoview">
                    <div class="main-top">
                    </div>
                    <div class="main-inner">
                        <div style="padding-bottom: 5px;">
                            顶层时间刻度：
                            <select style="margin-right: 20px;" onchange="changeTopTimeScale(this.value)">
                                <option value="year">年</option>
                                <option value="halfyear">半年</option>
                                <option value="quarter">季度</option>
                                <option value="month">月</option>
                                <option value="week" selected>周</option>
                                <option value="day">日</option>
                                <option value="hour">时</option>
                            </select>
                            底层时间刻度：
                            <select onchange="changeBottomTimeScale(this.value)" style="margin-right: 20px;">
                                <option value="year">年</option>
                                <option value="halfyear">半年</option>
                                <option value="quarter">季度</option>
                                <option value="month">月</option>
                                <option value="week">周</option>
                                <option value="day" selected>日</option>
                                <option value="hour">时</option>
                            </select>
                        </div>
                        <div class="mini-toolbar" style="border-bottom: 0;">
                            <a class="mini-button" plain="true" iconcls="icon-reload" onclick="load()">加载</a><a
                                class="mini-button" plain="true" iconcls="icon-save" onclick="save()">保存</a><span
                                    class="separator"></span> <a class="mini-button" plain="true" iconcls="icon-add"
                                        onclick="addTask()">增加</a><a class="mini-button" plain="true" iconcls="icon-edit"
                                            onclick="updateTask()">修改</a><a class="mini-button" plain="true" iconcls="icon-remove"
                                                onclick="removeTask()">删除</a><span class="separator"></span>
                            <a class="mini-button" plain="true" iconcls="icon-upgrade" onclick="upgradeTask()">升级</a><a
                                class="mini-button" plain="true" iconcls="icon-downgrade" onclick="downgradeTask()">降级</a><span
                                    class="separator"></span> <a class="mini-button" plain="true" iconcls="icon-lock"
                                        onclick="onLockClick" checkonclick="true">锁定列</a><span class="separator"></span>
                            <a class="mini-button" plain="true" iconcls="icon-zoomin" onclick="zoomIn()">放大</a><a
                                class="mini-button" plain="true" iconcls="icon-zoomout" onclick="zoomOut()">缩小</a><span
                                    class="separator"></span> <a class="mini-button" iconcls="icon-node" onclick="editTaskByTaskWindow()">
                                        任务面板</a> <a class="mini-button" iconcls="icon-date" onclick="showCalendars()">日历面板</a>
                        </div>
                        <div id="viewCt">
                        </div>
                        <div class="demo-desction">
                            <h3>
                                操作指南：</h3>
                            <p>
                                1）单元格编辑：如编辑“完成日期”单元格，其后置任务联动调整。</p>
                            <p>
                                2）横道图拖拽：拖拽调整后，其后置任务联动调整。</p>
                            <p>
                                3）移动任务：按住第一列单元格，上下移动任务，进行投放。</p>
                            <p>
                                4）右键菜单：选中任务，弹出右键菜单，进行增加、删除、修改、升级、降级等操作。</p>
                            <p>
                                5）按钮工作栏：选中任务，点击增加、删除、修改等按钮。</p>
                            <p>
                                6）任务面板：通过右键菜单的“编辑”项，或“修改任务”按钮，弹出任务面板，修改任务更多丰富属性。</p>
                            <p>
                                7）日历面板：点击“修改任务”按钮，弹出项目日历面板，修改项目日历的工作日和非工作日。</p>
                            <p>
                                8）切换时间刻度：选择“时间刻度”多选下拉框，或点击“放大”、“缩小”按钮。</p>
                        </div>
                    </div>
                    <div class="main-bottom">
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
</html>
<script type="text/javascript">
    mini.parse();
    /* 创建项目甘特图对象，设置列配置，创建右键菜单和任务面板
    -----------------------------------------------------------------------------*/

    var project = new PlusProject();
    project.setStyle("width:100%;height:350px");
    project.setColumns([
        new PlusProject.IDColumn(),
        new PlusProject.StatusColumn(),
        new PlusProject.NameColumn(),
        new PlusProject.PredecessorLinkColumn(),
        new PlusProject.PercentCompleteColumn(),
        new PlusProject.DurationColumn(),
        new PlusProject.StartColumn(),
        new PlusProject.FinishColumn(),
        new PlusProject.WorkColumn(),
        new PlusProject.DepartmentColumn(),
        new PlusProject.PrincipalColumn(),
        new PlusProject.AssignmentsColumn()
    ]);
    project.render(document.getElementById("viewCt"));


    //创建右键菜单
    var menu = new ProjectMenu();
    project.setContextMenu(menu);
    menu.edit.on("click", function (e) {
        ShowTaskWindow(project);
    });

    function load() {
        var url = "Data/Project.txt";
        LoadJSONProject(url, project);
    }
   // load();


    /* 业务代码：加载、保存、调试项目，增、删、改、升级、降级任务
    -----------------------------------------------------------------------------*/

    function track() {
        TrackProject(project);
    }
    function save() {
        alert("网站示例不提供保存，产品开发包内有此功能！");
        //SaveProject(project);
    }

    function addTask() {
        var newTask = project.newTask();
        newTask.Name = '<新增任务>';    //初始化任务属性

        var selectedTask = project.getSelected();
        if (selectedTask) {
            project.addTask(newTask, "before", selectedTask);   //插入到到选中任务之前
            //project.addTask(newTask, "add", selectedTask);       //加入到选中任务之内            
        } else {
            project.addTask(newTask);
        }
    }
    function removeTask() {
        var task = project.getSelected();
        if (task) {
            if (confirm("确定删除任务 \"" + task.Name + "\" ？")) {
                project.removeTask(task);
            }
        } else {
            alert("请选中任务");
        }
    }
    function updateTask() {
        ShowTaskWindow(project);
    }
    function upgradeTask() {
        var task = project.getSelected();
        if (task) {
            project.upgradeTask(task);
        } else {
            alert("请选选中任务");
        }
    }
    function downgradeTask() {
        var task = project.getSelected();
        if (task) {
            project.downgradeTask(task);
        } else {
            alert("请选选中任务");
        }
    }


    function changeTopTimeScale(value) {
        project.setTopTimeScale(value)
    }
    function changeBottomTimeScale(value) {
        project.setBottomTimeScale(value)
    }
    function zoomIn() {
        project.zoomIn();
    }
    function zoomOut() {
        project.zoomOut();
    }
    function showCalendars() {
        ShowCalendarWindow(project);
    }
    function editTaskByTaskWindow() {
        ShowTaskWindow(project);
    }

    function frozenColumn() {
        project.frozenColumn(0, 2);
    }
    function unfrozenColumn() {
        project.unfrozenColumn();
    }
    function onLockClick(e) {
        var checked = this.getChecked();
        if (checked) {
            project.frozenColumn(0, 2);
        } else {
            project.unfrozenColumn();
        }
    }
</script>
